import QtQuick 2.2
import QtQuick.Controls 1.1
import QtQuick.Controls.Styles 1.1
import org.qtproject.qtquick 1.0
import "qrc:/js/resources/Constants.js" as Constant

import "../common"
import "../configure"
import "../messenger"

Item {
    width: 480 * m_ratio
    height: 300 * m_ratio

    property real m_ratio : ApplicationInfo.ratio

    TabView {
        anchors.fill: parent
        style: touchStyle
        Tab {
            title: "MESSENGER"
            FriendListSortNamePage {
                uid: ApplicationInfo.activeUid
                visible: true
            }
        }
        Tab {
            title: "ACTIVE"
            FriendListOnlinePage {
                uid: ApplicationInfo.activeUid
                visible: true
            }
        }
    }

    Component {
        id: touchStyle
        TabViewStyle {
            tabsAlignment: Qt.AlignVCenter
            tabOverlap: 0
            frame: Item { }
            tab: Item {
                implicitWidth: control.width/control.count
                implicitHeight: 40 * m_ratio
                BorderImage {
                    anchors.fill: parent
                    border.bottom: 10 * m_ratio
                    border.top: 10 * m_ratio
                    source: styleData.selected ? "qrc:/staticdata/images/tab_selected_child.png":"qrc:/staticdata/images/tabs_standard_child.png"
                    Text {
                        anchors.centerIn: parent
                        color: "white"
                        text: styleData.title.toUpperCase()
                        font.pixelSize: 20 * m_ratio
                    }
                    Rectangle {
                        visible: index > 0
                        anchors.top: parent.top
                        anchors.bottom: parent.bottom
                        anchors.margins: 10 * m_ratio
                        width:1 * m_ratio
                        color: "#3a3a3a"
                    }
                }
            }
        }
    }
}
